<template>
  <div>
    <div class="SequenceLi">
      <a-row type="flex" justify="start" :gutter="16">
        <a-col
          :xs="20"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="12"
          :xxl="8"
          v-for="(item, index) in list"
          :key="index"
        >
          <div
            class="Sequence-one"
            :style="{
              'background-color':
                params && backgrounOn(item.macsn, item.macnum) ? '#a8d3f3' : '',
            }"
          >
            <div class="flex flex-a-c flex-j-s-b">
              <img
                :src="item.picture ? item.picture : defultimg"
                alt=""
                :onerror="onerrorimg"
              />
              <div class="Sequence-oneRight">
                <div
                  class="Sequence-oneRighttype"
                  :style="{ color: runStateOptioncolor(item.status, 1) }"
                >
                  <span>
                    <a-icon
                      class="icon"
                      :type="runStateOptioncolor(item.status, 2)"
                      theme="filled"
                      :style="{ color: runStateOptioncolor(item.status, 1) }"
                    />
                  </span>
                  {{ runStateOptioncolor(item.status, 3) }}
                </div>
                <p>
                  <a-icon
                    type="qrcode"
                    @click.stop="handleCode(record)"
                    style="fontSize: 16px;color: #40a9ff;"
                  />
                </p>
                <p>
                  <span>设备编号：</span>
                  {{ item.equipmentNumber }}
                </p>
                <p>
                  <span>设备型号：</span>
                  {{ item.equipmentModel }}
                </p>
                <p>
                  <span>设备类型：</span>
                  {{ item.equipmentTypeName }}
                </p>
                <p>
                  <span>设备编号：</span>
                  {{ item.macSn }}
                </p>
                <!-- <p>
                   <span>今日加工：</span>
                   {{ item.count }}
                 </p> -->
              </div>
            </div>
            <br />
            <div class="flex flex-a-c lookBox">
              <div
                class="lookDetail"
                @click="lookDetail(item, '/equipment/detail')"
              >
                设备详情
              </div>
              <div
                class="lookDetail"
                @click="lookDetail(item, '/equipment/product/details')"
              >
                生产统计
              </div>
              <div
                class="lookDetail"
                @click="lookDetail(item, '/equipment/yield/details')"
              >
                工件详情
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
//<a-icon type="exclamation-circle" /><a-icon type="close-circle" />
let thecolor = [
  { icon: "check-circle", color: "#2FB818", name: "运行", value: 1000 },
  { icon: "exclamation-circle", color: "#D65B4A", name: "报警", value: 2000 },
  { icon: "minus-circle", color: "#FBC225", name: "待机", value: 3000 },
  { icon: "close-circle", color: "#68768C", name: "离线", value: 4000 },
  { icon: "close-circle", color: "#68768C", name: "离线", value: "" },
];
// let list=[{name:"01",type:0},{name:"01",type:1},{name:"01",type:2},{name:"01",type:3}]
export default {
  name: "listSequence",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    params: {
      type: String,
      default: null,
    },
  },
  watch: {
    list: {
      deep: true,
      handler(val) {
        return val;
      },
    },
  },
  filter() {},
  data() {
    return {
      thecolor: thecolor,
      imgurl: "",
      defultimg: require("@images/defaultImg.png"),
      // list:list
      onerrorimg: 'this.src="' + require("@images/defaultImg.png") + '"',
    };
  },
  created() {
    this.imgurl = this.$pictureUrl;
  },
  methods: {
    backgrounOn(sn, num) {
      let index = false;
      let numflag = false;
      index = sn.indexOf(this.params) >= 0 ? true : false;
      numflag = num.indexOf(this.params) >= 0 ? true : false;
      return index || numflag;
    },

    lookDetail(item, path) {
      this.$router.push({
        path,
        query: { macSn: item.macSn },
      });
    },
    runStateOptioncolor(val, type) {
      let opt = thecolor.find((item) => item.value == val);
      if (type == 1) {
        return opt ? opt.color : "";
      } else if (type == 2) {
        return opt ? opt.icon : "";
      } else if (type == 3) {
        return opt ? opt.name : "";
      }
    },
  },
};
</script>

<style scoped lang="less">
@import "style.less";
</style>
